<template>
	<div class="video-wrapper">
		<video id="remoteVideoTag" src="" class="remote-video" :controls="false" autoplay></video>

		<div>
			<div
				v-for="(vid, index) in remoteStreamList"
				:key="index"
				style="width: 280px; height: 100px"
				class="item-span other-video"
				:id="`remote_stream-${vid}`"
			></div>
		</div>

		<div class="footer">
			<div class="btn-bg" @click="hangUp">
				<svg
					t="1671034338635"
					class="icon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="2091"
					width="32"
					height="32"
				>
					<path
						d="M512 1023.999069a508.779681 508.779681 0 0 1-199.291759-40.238472 510.300163 510.300163 0 0 1-162.745886-109.73071A510.354466 510.354466 0 0 1 40.231646 711.284001 508.826226 508.826226 0 0 1 0.000931 512a508.841741 508.841741 0 0 1 40.238472-199.291759 510.338951 510.338951 0 0 1 109.73071-162.745886A510.292406 510.292406 0 0 1 312.708241 40.239403 508.787439 508.787439 0 0 1 512 0.000931a508.795196 508.795196 0 0 1 199.291759 40.238472 510.222587 510.222587 0 0 1 162.745886 109.722952 510.284648 510.284648 0 0 1 109.730709 162.745886A508.841741 508.841741 0 0 1 1023.999069 512a508.826226 508.826226 0 0 1-40.238472 199.291759 510.292406 510.292406 0 0 1-109.73071 162.745886 510.27689 510.27689 0 0 1-162.745886 109.730709A508.795196 508.795196 0 0 1 512 1023.999069zM252.695744 543.348307a13.4904 13.4904 0 0 0 3.878781 9.471982 13.335248 13.335248 0 0 0 9.471983 3.917569l127.456738-0.201697a13.428339 13.428339 0 0 0 13.412824-13.412824l0.06206-51.680875a87.272569 87.272569 0 0 1 24.420804-20.030025 161.489161 161.489161 0 0 1 82.493911-20.16966h0.279272a159.573043 159.573043 0 0 1 82.230154 20.084327 86.985539 86.985539 0 0 1 24.296683 20.084327v51.362816a13.358521 13.358521 0 0 0 3.878781 9.471983 13.226643 13.226643 0 0 0 9.425437 3.917568l114.400762-0.170666h13.110279a13.358521 13.358521 0 0 0 9.495255-3.917569 13.451612 13.451612 0 0 0 3.878781-9.495255l0.054303-29.168432a13.226643 13.226643 0 0 0-0.387878-3.157327l-0.558544-2.327269a88.436203 88.436203 0 0 0-6.826655-27.570374c-25.553408-59.453953-131.288973-104.292659-245.914704-104.292659h-0.589575a511.355191 511.355191 0 0 0-134.903997 18.967238c-45.102463 12.776704-80.802762 30.681156-100.514726 50.424151a114.990336 114.990336 0 0 0-24.901773 35.645996 86.357176 86.357176 0 0 0-7.57138 34.505634l-0.054303 27.787586z"
						fill="#FC4A46"
						p-id="2092"
					></path>
				</svg>
				<span>挂断</span>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import trtcCall from './trtc'
import { getStore } from '@/utils/store'
import useMqtt from '@/hooks/useMqttHooks'

const { startMqtt } = useMqtt()

const props = defineProps<{
	roomId: string
}>()

const emit = defineEmits(['refresh'])

let call: any = shallowRef()
const remoteStreamList = ref([])

const hangUp = () => {
	call.value?.outRoom && call.value?.outRoom()
	emit('refresh')
}


const userInfo = getStore('userInfo') || {}
// 创建房间号
call.value = new trtcCall(userInfo.id, Number(props.roomId))
call.value.init()

startMqtt('trtc_video_call/hangup', (topic, message) => {
	hangUp()
})

onMounted(() => {
	nextTick(() => {
		// 远端流订阅 成功
		setTimeout(() => {
			call.value?.client.on('stream-subscribed', (evt) => {
				const remoteStream = evt.stream
				const id = remoteStream.getId()
				remoteStreamList.value.push(id)
				nextTick(() => {
					remoteStream.play(`remote_stream-${id}`) //播放
				})
			})
		}, 1500)
	})
})
</script>

<style lang="scss" scoped>
.box-shadow-1 {
	box-shadow: 1px 1px rgb(29 68 114 / 70%);
	border: 1px solid rgb(73 255 104 / 36%);
}

.video-wrapper {
	top: 0;
	left: 0;
	background-color: rgb(156, 153, 153);
	width: 100%;
	height: 100vh;
	position: relative;
	overflow: hidden;

	.remote-video {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		@extend .box-shadow-1;
	}

	.local-video {
		@extend .box-shadow-1;
		width: 200px;
		height: 200px;
		position: absolute;
		top: 1rem;
		right: 1rem;
		border-radius: 50%;
		object-fit: fill;
	}

	.footer {
		width: 200px;
		height: 200px;
		position: absolute;
		bottom: 5vh;
		right: 1rem;
		border-radius: 50%;
		object-fit: fill;

		.btn-bg {
			background-color: rgb(111 126 143 / 36%);
			margin: 4px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-radius: 10px;
			padding: 2px 5px;

			&:hover {
				cursor: pointer;
				background-color: rgb(111 126 143 / 56%);
			}

			.icon {
				background-color: #fff;
				border-radius: 50%;
				@extend .box-shadow-1;
			}
		}
	}
}
</style>
